<template>
    <div class="fileup-title-box">
        <!-- <i class="fa-solid fa-book"></i> -->
         		<el-icon class="icon" style="font-size: 25px;">
					<FolderAdd />
				</el-icon>
        <h5>上传数据库资料</h5>
    </div>
    <div class="file-upload" @drop.prevent="handleDrop" @dragover.prevent @click="triggerFileInput">
        <!-- <span class="upload-title">
            <i class="fa-solid fa-file-arrow-up"></i>
            <span >上传文件 （支持多选TXT/PDF）</span>
        </span> -->
        <div class="upload-area" v-if="files.length === 0">
            <i class="fa-solid fa-arrow-up-from-bracket"></i>
            <div class="upload-text">
                <p>选择文件或拖拽文件</p>
                <p>（支持CSV/EXCEL）</p>
            </div>
        </div>
        <input type="file" ref="fileInput" multiple @change="handleFileUpload" accept=".csv,.xlsx,.xls"
            style="display: none" />
        <div class="upload-list">
            <div v-for="(file, index) in files" :key="index" class="file-item">
                <div class="file-info">
                    <i class="fa-solid fa-file-lines"></i>
                    <span class="file-name">{{ file.name }}</span>
                    <span class="file-size">{{ formatFileSize(file.size) }}</span>
                </div>
                <div class="file-actions">
                    <i class="fa-solid fa-download" @click.stop="downloadFile(file)"></i>
                    <i class="fa-solid fa-xmark" @click.stop="removeFile(index)"></i>
                </div>
            </div>
        </div>
    </div>
    <!-- <div class="upload-btn">
        <button @click="handleProcessFiles" :disabled="uploading" :class="{ 'disabled': uploading }">处理上传的文件</button>
    </div> -->
    <div class="upload-status-box">
        <div class="upload-status-lable">文件处理状态</div>
        <div class="upload-status">
           <div class="upload-status-msg-loading" v-if="!resMsg">  等待文件上传 </div>
           <div class="upload-status-msg" v-else> {{ resMsg }} </div>
        </div>
    </div>
</template>

<script src="./fileupload.js"></script>

<style src="./fileupload.css" scoped></style>